<!--vue模板-->
<template>
  <div style="width: 60px; line-height: 60px">
    <el-button type="primary" size="default" @click="add"
      >添加类型</el-button
    >
  </div>
  <el-tabs type="card" closable @tab-remove="del" v-model="currentId">
    <template v-for="type in types" :key="type.id">
      <el-tab-pane :label="type.name" :name="type.id"></el-tab-pane>
    </template>
  </el-tabs>
 <!--表格数据 -->
 <dict-list :parent-id="currentId"></dict-list>

  <!--保存-->
  <save-or-update
    v-model:visible="ishow"
    @refreshData="queryType"
    ref="saveupdate"
  ></save-or-update>
</template>

<!--vue 组件选项定义-->
<script>
import SaveOrUpdate from "./SaveOrUpdate.vue";
import DictList from './DictList.vue'
export default {
  data() {
    return {
      ishow: false,
      types: [],
      currentId:""
    };
  },
  components: {
    SaveOrUpdate,
    DictList
  },
  created() {
    this.queryType();
  },
  methods: {

    add(){
        this.ishow=true;
        this.$refs.saveupdate.init(1);
    },
    //移除
    del(id) {
      this.$confirm("你确定要删除类别吗?", "提示")
        .then((res) => {
          this.todel(id);
        })
        .catch((err) => {});
    },
    
    todel(id){
        this.$http.get("/api/dict/delete", {id}).then((res) => {
        if (res.code == 200) {
            this.$message.success("删除成功");
            this.queryType();
        }
      });
    },
    queryType() {
      this.$http.get("/api/dict/type", {}).then((res) => {
        if (res.code == 200) {
          this.types = res.result;
          if(this.types.length>0){
             this.currentId=this.types[0].id;
          }
        }
      });
    },
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped></style>
